<template name="live_detail">
	<view>
		<view class="main">
			<view class="live-bg">
				<view class="bg filter">
					<image v-if="detail" :src="detail.thumb" mode="aspectFill"></image>
					<image v-else :src="CLOUDPATH+'/gsc/livebg4.jpg'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="live-video">
				<livePlayer ref="livePlayer" style="width: 100%;height:100%;"></livePlayer>
			</view>

			<swiper class="controller-swiper" v-if="isPlaying && doPlay" current="1">
				<swiper-item>
					<view class="swiper-item">
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item relative">
						<view class="comment-view">
							<TIMComment ref="TIMComment" v-on:memberChange="memberChange"></TIMComment>
						</view>
						<view class="outlink-view " :class="outlinkStep?'animation-shake':''" v-if="detail.link_url" @tap="goLink">
							<image :src="detail.link_thumb" mode="aspectFit"></image>
						</view>
						<view class="ctr-bottom">
							<view class="padding text-center">
								<view class="ctr-btn text-white margin-top relative" @tap="goGoods" v-if="goods && goods.length > 0">
									<image :src="CLOUDPATH+'/gsc/live-goods.png'" mode="aspectFill" class="btn-ctr"></image>
									<view class="showgoods absolute overflow" v-if="goodsTipsStep>0">
										<view class="relative showgoods-ctr bg-white shadow" :class="[goodsTipsStep==1?'animation-slide-right':'',goodsTipsStep==2?'animation-slide-right animation-reverse':'']">
											<view class=" radius space-between text-sm">
												<image :src="goods[0].url" mode="aspectFill" class="thumb"></image>
												<view class="text-left margin-left-sm">
													<view class="title">{{goods[0].name}}</view>
													<view class="text-price text-red text-lg">{{goods[0].price}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="ctr-btn text-white margin-top" @tap="goComment" data-target="commonModal">
									<image :src="CLOUDPATH+'/gsc/live-hd.png'" mode="aspectFill" class="btn-ctr"></image>
									<view class="text-white">互动</view>
								</view>
								<view class="ctr-btn gift margin-top" @tap="goGift">
									<image :src="CLOUDPATH+'/gsc/live-ds.png'" mode="aspectFill" class="btn-ctr"></image>
									<view class="text-white">打赏</view>
								</view>
								<button class="ctr-btn share margin-top" @tap="showShare" open-type="share">
									<image :src="CLOUDPATH+'/gsc/live-fx.png'" mode="aspectFill" class="btn-ctr"></image>
									<view class="text-white">分享</view>
								</button>
								<view class="ctr-btn close margin-top" @tap="goBack">
									<image :src="CLOUDPATH+'/gsc/live-gb.png'" mode="aspectFill" class="btn-ctr"></image>
								</view>
								<view>
									<LikeHead ref="LikeHead"></LikeHead>
								</view>
							</view>
						</view>

						<view class="ctr-header">
							<view class="space-between">
								<!-- #ifdef H5 -->
								<view class="teacher margin-left text-white round ">
									<view class="cuIcon cuIcon-back margin-right solid-right" @tap="goBack"></view>
									<view class="cu-avatar round thumb">
										<image v-if="detail.lecturer_thumb" :src="detail.lecturer_thumb" mode="aspectFill"></image>
									</view>
									<view class="info margin-left-sm padding-right-sm">
										<view class="text-white text-overflow">{{detail.lecturer_name}}</view>
										<view class="text-sm">{{clientList_length}}观看</view>
									</view>
								</view>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view class="teacher margin-left text-white round margin-top">
									<view class="cuIcon cuIcon-back margin-right solid-right" @tap="goBack"></view>
									<view class="cu-avatar round thumb">
										<image v-if="detail.lecturer_thumb" :src="detail.lecturer_thumb" mode="aspectFill"></image>
									</view>
									<view class="info margin-left-sm padding-right-sm">
										<view class="text-white text-overflow">{{detail.lecturer_name}}</view>
										<view class="text-sm">{{clientList_length}}观看</view>
									</view>
								</view>
								<!-- #endif -->
							</view>
							<view class="btn-reward-modal margin-left text-white text-sm round padding-xs margin-top-sm padding-left-sm"
							 @tap="goRank">打赏榜<text class="cuIcon cuIcon-right sm"></text></view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="live-controller" v-if="isPlaying">
				<view class="playbtn bmg-center" v-if="isPlaying && !doPlay" @tap="playLive">
					<image :src="CLOUDPATH+'/college/btn-play.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="live-reward" v-if="isPlaying">
				<Reward ref="Reward" :live_id="id" v-on:pRewardChange="rewardChange"></Reward>
			</view>
		</view>

		<liveGoodsView ref="liveGoodsView"></liveGoodsView>
		<ShareView ref="ShareView"></ShareView>
	</view>
</template>

<script>
	import livePlayer from '@/components/default/livePlayer.vue'
	import TIMComment from '@/components/default/TimComment.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import liveGoodsView from '@/components/college/liveGoodsView.vue'
	import Reward from '@/components/college/reward.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "live_detail",
		components: {
			livePlayer,
			TIMComment,
			ShareView,
			liveGoodsView,
			Reward
		},
		computed: mapState(['forcedLogin', 'hasLogin']),
		data() {
			return {
				id: 0,
				isError: true,
				isPlaying: false,
				doPlay: false,
				videoError: '',
				systemError: '',
				roleError: '',
				detail: null,
				goods: null,
				cacheDetail: null,
				showEmg: false,
				clientList_length: 0,
				videoStream: '',
				p: '',
				modalName: "",
				role: false,
				member: null,
				timmer: null,
				tp: 0,
				tpError: false,
				goodsTipsStep: 0,
				outlinkStep: 0,
				CLOUDPATH: this.$config.cloudPath
			}
		},
		onLoad(options) {
			this.id = options.id
			if (!this.id) {
				this.$common.showError('参数有误', function() {
					uni.navigateBack({})
				})
				return
			}
			if (this.timmer) clearInterval(this.timmer)

			this.cacheDetail = this.$common.getCache('live-detail')
			console.log(options)
			if (options.token) {
				this.login([options.token])
			}
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
					this.getDetail()
				})
			}
		},
		onShow() {
			// if (this.$common.loginAuth(true)) {
			// if (uni.getSystemInfoSync().platform == 'android') {
			// 	setTimeout((res) => {
			// 		this.$nextTick((r) => {
			// 			this.playLive()
			// 		})
			// 	}, 200)
			// }
			// }
		},
		onReady() {
		},
		onUnload() {
		},
		beforeDestroy() {
			if (this.timmer) clearInterval(this.timmer)
			uni.closeSocket({
				success: () => {
					console.log('关闭socket')
				}
			})
			this.quitTIM()
		},
		onHide() {
			this.doPlay = false
		},
		methods: {
			...mapMutations(['login', 'info']),
			playLive() {
				this.$refs.livePlayer.playLive(this.videoStream)
				
				this.doPlay = true
				this.loginIm()
				this.goodsStepPlay()
				setTimeout((res) => {
					this.outlinkStepPlay()
				}, 5000)
			},
			loginIm() {
				this.$common.getMember().then((member) => {
					if (!this.$refs.TIMComment) {
						setTimeout((r) => {
							this.loginIm()
						}, 500)

						return
					}
					console.log(this.$refs.TIMComment)
					let inUser = {
						userId: 'member_' + member.id,
						name: member.nickname,
						thumb: member.head_portrait
					}
					this.$refs.TIMComment.join(inUser, this.detail.im.room_id, false)
				})
			},
			quitTIM() {
				if(this.$refs.TIMComment){
					this.$refs.TIMComment.quit()
				}
			},
			showDetail() {
				console.log(this.detail)
				// this.isError = false
				// if (this.detail.stream_status == 0 && this.detail.play_url.trim() == '') {
				// 	this.videoError = "未开播，开播时间" + this.$common.timeFormat(this.detail.start_time)
				// } else {
				// 	if (this.detail.in_role == 0) {
				// 		this.roleError = '权限有误'
				// 	} else {
						if (this.detail.stream_status == 0) {
							this.videoStream = this.detail.play_url
							this.isPlaying = true
						} else if (this.detail.stream && this.detail.stream.hls) {
							this.videoStream = this.detail.stream.hls
							this.isPlaying = true
						} else {
							this.systemError = '直播有误，请稍后再试'
							return
						}
						// } else if (uni.getSystemInfoSync().platform == 'android') {
						// 	this.videoStream = this.detail.detail.stream_url.rtmp
						// } else {
						// 	this.videoStream = this.detail.detail.stream_url.rtmp
						// }
						console.log(this.videoStream)
						// this.playLive()
						// if (uni.getSystemInfoSync().platform == 'android') {
						// 	setTimeout((res) => {
						// 		this.$nextTick((r) => {
						// 			this.playLive()
						// 		})
						// 	}, 200)
						// }
				// 	}
				// }
			},
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('live_detail', {
						id: this.id
					})
					.then((response) => {
						uni.hideLoading()
						this.detail = response.data.data
						// this.getGoods()
						this.goods = this.detail.goods
						console.log(this.goods)
						this.showDetail()
					})
					.catch((response) => {
						console.log(response)
						this.isError = true
						this.systemError = response.data.message
						uni.hideLoading()
					})
			},
			// getGoods() {
			// 	this.$http
			// 		.get('in_live_product', {
			// 			id: this.id
			// 		})
			// 		.then((response) => {
			// 			this.goods = response.data.data
			// 		})
			// 		.catch((response) => {})
			// },
			checkPlaying() {},
			goBack() {
				if (this.timmer) clearInterval(this.timmer)
				uni.redirectTo({
					url: "/pages/shop/live/live?id=" + this.id
				})
			},
			goGift() {
				if (this.timmer) clearInterval(this.timmer)
				this.$refs.Reward.openModal('rewardModal')
			},
			goRank() {
				if (this.timmer) clearInterval(this.timmer)
				this.$refs.Reward.openModal('rankModal')
			},
			goLevel() {
				if (this.timmer) clearInterval(this.timmer)
				uni.navigateTo({
					url: '/pages/member/upgrade'
				})
			},
			goGoods() {
				this.$refs.liveGoodsView.openModal(this.goods)
			},
			goLink() {
				window.location.href = this.detail.link_url
			},
			goComment() {
				this.$refs.TIMComment.showCommon()
			},
			showShare() {
				if (this.hasLogin) {
					this.$common.getMember().then((member) => {
						this.member = member
						this.$refs.ShareView.show({
							type: 'shop_live',
							id: this.detail.id,
							share_url: this.detail.share_url,
							title: this.detail.title,
							thumb: this.detail.thumb,
							lecturer_name: this.detail.lecturer_name,
							member_id: this.member.id,
							member_name: this.member.nickname,
							member_head: this.member.head_portrait,
							reget: true
						})
					})
				}
			},
			goodsStepPlay() {
				setTimeout((res) => {
					this.goodsTipsStep = 1
					setTimeout((res) => {
						this.goodsTipsStep = 3
					}, 1000)
					setTimeout((res) => {
						this.goodsTipsStep = 2
						setTimeout((res) => {
							this.goodsTipsStep = 0
						}, 1000)
					}, 5000)
				}, 1000)
			},
			outlinkStepPlay() {
				this.outlinkStep = 1
				setTimeout((res) => {
					this.outlinkStep = 0
					setTimeout((res) => {
						this.outlinkStepPlay()
					}, 10000)
				}, 1000)
			},
			memberChange(e) {
				this.clientList_length = parseInt(this.detail.default_count) + e
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				if (this.modalName == 'commonModal') {
					this.showEmg = false
					this.commentFocus = true
				}
			},
			hideModal(e) {
				this.modalName = null
			},
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/collegePackages/pages/college/live?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.title,
				imageUrl: this.detail.thumb,
				path: path
			}
		},
	}
</script>

<style>
	@import "@/colorui/animation.css";

	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.main {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}


	.live-bg,
	.live-roles,
	.live-video,
	.live-controller {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.live-bg {
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140%;
		left: -20%;
	}

	.live-roles {
		z-index: 10;
	}

	.live-video {
		z-index: 1;
	}

	.live-controller {
		z-index: 5;
	}

	.bmg-center {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
	}


	.playbtn {
		position: absolute;
		left: 0;
		top: 0;
		/* background-color: rgb(0, 0, 0, 0.3); */
	}

	.playbtn image {
		width: 120rpx;
		height: 120rpx;
		cursor: pointer;
	}

	.live-bg .bg {
		width: 100%;
		height: 100%;
	}

	.live-bg .bg image {
		width: 100%;
		height: 100%;
	}

	.filter {
		background-color: #000000;
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
	}

	.live-roles .tips {
		background-color: rgb(0, 0, 0, 0.5);
		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.ctr-header {
		overflow: hidden;
		align-items: center;
		position: absolute;
		left: 0;
		top: 20rpx;
		width: 100%;
	}

	.ctr-bottom {
		right: 20rpx;
		bottom: 60rpx;
		position: absolute;
	}

	.comment-view {
		width: 60%;
		position: absolute;
		left: 30rpx;
		bottom: 80rpx;
	}


	.btn-reward-modal {
		background-color: rgb(0, 0, 0, 0.3);
		display: inline-block;
	}

	.ctr-header .teacher {
		/* width: 300rpx;
		min-width: 300rpx; */
		/* height: 80rpx; */
		align-items: center;
		display: flex;
		justify-content: flex-start;
		background-color: rgb(0, 0, 0, 0.3);
		padding: 5rpx 20rpx;
	}

	.ctr-header .teacher .info {
		max-width: 200rpx;
		min-width: 80rpx;
	}

	.audience {
		width: 100%;
		margin-left: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 60rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.audience .count {
		/* width: 100rpx; */
		/* min-width: 100rpx; */
		background-color: rgb(0, 0, 0, 0.5);
		padding: 8rpx 10rpx;
		border-radius: 30rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.audience .list {
		/* width: 100%;
		margin-right: 10rpx;
		overflow: auto;
		height: 100%; */
	}

	.audience .list .cu-avatar {
		width: 60rpx;
		height: 60rpx;
		float: right;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.ctr-bottom .say {
		width: 240rpx;
		height: 80rpx;
		min-width: 240rpx;
		background-color: rgb(0, 0, 0, 0.5);
		line-height: 80rpx;
		padding-left: 34rpx;
		border-radius: 60rpx;
		margin: 0 20rpx;
	}


	.ctr-bottom .btns {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
	}

	.ctr-bottom .ctr-btn {
		width: 60rpx;
	}

	.ctr-bottom .ctr-btn image {
		width: 60rpx;
		height: 60rpx;
	}

	.ctr-bottom .btns .close {
		margin-left: 40rpx;
	}

	.emg-view {
		height: 320rpx;
		overflow: hidden;
	}

	.emg-view swiper {
		height: 320rpx;
		overflow: hidden;
	}

	.emg-view .emg-item {
		height: 70rpx;
	}

	.emg-view .emg-item image {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx auto;
	}

	.emg-view .cu-list {
		background: none;
		overflow: hidden;
	}

	.level-ad {
		width: 100%;
	}

	.psdtips {
		background: none;
		position: relative;
	}

	.psdtips .btnss {
		position: absolute;
		bottom: 40rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.controller-swiper {
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 100vh;
		left: 0;
		z-index: 98;
	}

	.controller-swiper .swiper-item {
		width: 100%;
		height: 100%;
	}

	.showgoods {
		width: 320rpx;
		height: 140rpx;
		right: 0rpx;
		top: -160rpx;
	}

	.showgoods .showgoods-ctr {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.showgoods .thumb {
		width: 100rpx !important;
		height: 100rpx !important;
		min-width: 100rpx !important;
	}

	.showgoods .title {
		height: 60rpx;
		line-height: 30rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.showgoods-ctr:after {
		content: '';
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-top-color: #FFFFFF;
		position: absolute;
		bottom: -16px;
		right: 10px;
	}

	.outlink-view {
		width: 160rpx;
		height: 80rpx;
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 50%;
		display: flex;
		justify-content: flex-start;
	}

	.outlink-view image {
		height: 100%;
	}

	.ctr-btn.share {
		background: none;
		padding: 0;
		font-size: 12px;
		border: 0;
	}

	.ctr-btn.share::after {
		display: none;
	}

	.comment-view {
		width: 100%;
		height: 45vh;
		bottom: 0;
		left: 0;
		position: absolute;
	}
</style>
